<template>
  <form ref="form" class="date-form-container" @submit.prevent="handleSubmit">
    <div class="form-item">
      <div class="input-area">
        <input type="text" placeholder="用户昵称" max="10" v-model="formData.nickname"/>
        <span class="tip">{{formData.nickname.length}}/10</span>
      </div>
      <div class="error">{{error.nickname}}</div>
    </div>
    <div class="form-item">
      <div class="text-area">
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="输入内容"
          max="300"
          v-model="formData.content"
        ></textarea>
        <span class="tip">{{formData.content.length}}/300</span>
      </div>
      <div class="error">{{error.content}}</div>
    </div>

    <div class="form-item">
        <div class="button-area">
            <button>{{isSubmiting?'正在提交':'提交'}}</button>
        </div>
    </div>
  </form>
</template>

<script>
export default {
  name: "DataForm",
  data(){
      return {
          formData:{
              nickname:'',
              content:''
          },
          error:{
              nickname:'',
              content:''
          },
          isSubmiting:false
      }
  },
  methods:{
      handleSubmit(){
          //验证是否输入内容
          this.error.nickname=this.formData.nickname?'':'请输入昵称';
          this.error.content = this.formData.content?"":'请输入内容';

        //有错误消息，不做处理，直接返回
          if(this.error.nickname||this.error.content){
              return;
          }


          //提交表单内容
          this.isSubmiting = true;
          this.$emit('submit',this.formData,(successMsg)=>{
              //提示是否提交成功
              this.$showMessage({
                  content:successMsg,
                  type:'success',
                  duration:1000,
                  container:this.$refs.form
              })
              //重置表单内容
              this.formData.nickname='';
              this.formData.content="";

              this.isSubmiting=false;
          });
      }
  }
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.data-form-container {
  margin-bottom: 20px;
  overflow: hidden;
}
.form-item {
  margin-bottom: 8px;
}
.input-area {
  width: 50%;
  position: relative;
}
.text-area {
  position: relative;
}
.tip {
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #b4b8bc;
  font-size: 12px;
}
input,
textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed @gray;
  outline: none;
  color: @words;
  font-size: 14px;
  border-radius: 4px;
  &:focus {
    border-color: @primary;
  }
}
input {
  padding: 0 15px;
  height: 40px;
}
textarea {
  resize: none;
  padding: 8px 15px;
  height: 120px;
}
.error {
  margin-top: 6px;
  color: @danger;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
}
button {
  position: relative;
  cursor: pointer;
  border: none;
  outline: none;
  width: 100px;
  height: 34px;
  color: #fff;
  border-radius: 4px;
  background: @primary;
  &:hover {
    background: darken(@primary, 10%);
  }
  &:disabled {
    background: lighten(@primary, 20%);
    cursor: not-allowed;
  }
}
</style>